<template>
    <el-dialog :title="title" :visible='showDialog' width="21%" @close="handleClose" :close-on-click-modal='false'>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="学科名称" prop="subjectName">
                <el-input v-model="ruleForm.subjectName"></el-input>
            </el-form-item>
            <div>
                <span>是否显示</span>
                <el-switch v-model="ruleForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949" :active-value=1  :inactive-value= 0></el-switch>
            </div>
            <el-form-item class="fastener">
                <el-button type="primary" @click="addSubjects">确认</el-button>
                <el-button @click="handleClose" class="del">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/subjects'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    nodeDate: {
      type: Object,
      default: () => ({})
    },
    subjectName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', change: 'blur' }
        ]
      }
    }
  },
  computed: {
    title () {
      return this.ruleForm.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 数据回显
    async echoSubject () {
      const { data } = await detail(this.nodeDate)
      this.ruleForm = data
    },
    // 点击确认执行的操作
    addSubjects () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        if (this.ruleForm.id) {
          await update(this.ruleForm)
          this.$message.success('修改成功')
        } else {
          await add(this.ruleForm)
          this.$message.success('新增成功')
        }
        this.handleClose()
        if (this.subjectName !== '') {
          this.$parent.filter()
        } else {
          this.$parent.subjectList()
        }
      })
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:showDialog', false)
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        subjectName: '',
        isFrontDisplay: 1
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-button{
    float:right;
}
.del{
    margin-right: 10px;
}
::v-deep .el-input{
    top:0;
    width: 280px;
}
::v-deep .el-form-item__error{
    left:77px
}
span{
    font-size: 14px;
    color: #606266;
    padding-right: 12px;
    padding-left: 13px;
    font-weight: 700;
}
.fastener{
    margin-top: 45px;
}
::v-deep .el-dialog__body{
    padding-bottom: 5px;
}
</style>
